import React, { useEffect, useState } from "react";
import './order.css'
import { Tabs, TabPanel } from 'tdesign-mobile-react';
import axios from "axios";
import { useNavigate } from "react-router-dom";

export default function Order() {
    const navigate = useNavigate();
    const stickyProps = {
        zIndex: 999,
    };
    const [orderCate, setOrderCate] = useState([]);
    const [order, setOrder] = useState([]);
    const [selectedValue, setSelectedValue] = useState(''); // 用于存储当前选中的 Tab 的值  

    const getOrderCate = async () => {
        const res = await axios.get(`http://localhost:3000/ycf/orderCate`);
        if (res.data.code === 200) {
            setOrderCate(res.data.data);
        }
    };

    const getOrder = async (status = '') => {
        const res = await axios.get(`http://localhost:3000/ycf/getOrder?c_id=${status}`);
        if (res.data.code === 200) {
            setOrder(res.data.data);
            console.log(res.data.data)
        }
    };

    useEffect(() => {
        getOrderCate();
        getOrder(selectedValue); // 在首次加载时调用 getOrder，并传递选中的值  
    }, []);

    const onChange = (value, label) => {
        console.log(`change to ${value}`, label);
        setSelectedValue(value); // 更新选中的 Tab 值  
        getOrder(value); // 调用 getOrder 并传递新的选项卡值  
    };

    return (
        <div className="order-box">
            <div className="order-title">

            </div>
            <div className="order-content">
                <div className="order-options">
                    <Tabs onChange={onChange} className="td-options">
                        <TabPanel value='' label={'全部'} className='td-options-list'></TabPanel>
                        <TabPanel value='676cb0c0aa1927093f1d9580' label={'待付款'}></TabPanel>
                        <TabPanel value='676cb0b2aa1927093f1d957f' label={'待使用'}></TabPanel>
                        <TabPanel value='676cb0d4aa1927093f1d9581' label={'已完成'}></TabPanel>
                        <TabPanel value='676cb0edaa1927093f1d9582' label={'退款'}></TabPanel>
                    </Tabs>
                </div>
                <div className="order-list">
                    {order.map((item) => {
                        return <div key={item._id} className="order-list-children">
                            <div className="order-list-children-title">
                                <p>{item.type.store}</p>
                            </div>
                            <div style={{ display: 'flex' }}>
                                <div className="order-list-children-img">
                                    <img src={item.imgUrl} width={100} height={100} style={{ marginLeft: 6, marginTop: 5 }}></img>
                                </div>
                                <div className="order-list-children-text">
                                    <div style={{ display: 'flex', fontSize: 18, color: 'white' }}>
                                        <p style={{ marginRight: 80 }}>{item.name}</p><p style={{ marginTop: 2 }}>×{item.quantity}</p>
                                    </div>
                                    <p style={{ fontSize: 18, color: 'red',marginTop:20 }}>￥{item.orderPrice}</p>

                                    {item.c_id == '676cb0c0aa1927093f1d9580' ?
                                        <button className="order-list-children-button" onClick={()=>{
                                            navigate('/really', {state:item})
                                        }}>
                                            待付款
                                        </button> :
                                        <button className="order-list-children-button">
                                            查看
                                        </button>
                                    }
                                </div>
                            </div>
                        </div>
                    })}
                </div>
                <div className="order-footer">
                    <div className="party-footer-left">
                        <p onClick={() => { navigate('/party-layout/partyHome'); }}>吃喝玩乐</p>
                    </div>
                    <div className="party-footer-right">
                        <p onClick={() => { navigate('/order'); }}>我的订单</p>
                    </div>
                </div>
            </div>
        </div>
    );
}